<template>
  <div class="like">
    <div class="like-top ">
      <img src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">
      猜你喜欢
    </div>
    <ul>
      <li class="like-item border-bottom"
          v-for="(item,index) in likeList"
          :key="index"
          @click="toDetails"
      >
        <div>
          <div class="like-img">
            <img :src="item.imgUrl">
          </div>
          <div class="like-title">
            <div class="like-text">{{item.text}}</div>
            <div class="like-list">{{item.pinfen}}
              <span class="like-comment">{{item.comment}}</span>
            </div>
            <div class="like-price"><span class="like-price-num">{{item.price}}</span>起<span class="like-address">{{item.address}}</span></div>
          </div>
          <div class="like-bottom" v-if="item.msg.length===0" style="display: none"><span></span></div>
          <div class="like-bottom" v-else style="display: inline-block"><span>{{item.msg}}</span></div>

        </div>
      </li>

    </ul>
  </div>
</template>

<script>
    export default {
      props:["likeList"],
        data(){
          return{

          }
        },
      methods:{
        toDetails(){
          this.$router.push('/detail')
        }
      }
    }
</script>

<style scoped>
  .like{
  margin-top: .3rem;
  background: white;
  padding:.2rem;
  }
  .like-top{
    font-size: .32rem;
  }
  .like-top img{
    width: .3rem;
    height: .3rem;
  }
  .like-item{
    position: relative;
    padding: .2rem 0;
    overflow:hidden;
  }
  .like-img{
    float: left;
    overflow: hidden;
  }
  .like-img img{
    width: 2rem;
    height: 2rem;
  }
  .like-title{
    overflow: hidden;
    padding-left: .22rem;

  }
  .like-text{
    font-size: .32rem;
    font-weight: normal;
    margin-top: .2rem;
  }
  .like-list{
    height: .32rem;
    font-size: .24rem;
    margin-top: .2rem;
    color: #ffb436;
  }
  .like-comment{
    margin-left: .2rem;
    color: #616161;;
  }
  .like-price{
    position: relative;
    margin-top: .22rem;
    color: #616161;
    font-size: .24rem;
  }
  .like-price-num{
    font-size: .4rem;
    color: #ff8300;;
  }
  .like-address{
    font-size: .24rem;
    color: #616161;
    position: absolute;
    right: .24rem;
    bottom: 0;
  }
  .like-bottom{
    overflow: hidden;
  }
  .like-bottom span{
    display: inline-block;
    margin-top: .48rem;
    margin-right: .24rem;
    background: #fff9f9;
    padding: .04rem .1rem;
    color: #f55;
    font-size: .24rem;
    line-height: .34rem;
  }



</style>
